<template>
	<view class="container">
		<view class="form-section">
			<view class="form-item">
				<text class="icon">📱</text>
				<input 
					type="number"
					v-model="form.phone"
					placeholder="请输入手机号"
					maxlength="11"
				/>
			</view>
			
			<view class="form-item">
				<text class="icon">🔒</text>
				<input 
					:type="showPassword ? 'text' : 'password'"
					v-model="form.password"
					placeholder="请设置登录密码"
					maxlength="20"
				/>
				<text class="eye-icon" @click="showPassword = !showPassword">
					{{ showPassword ? '👁️' : '👁️‍🗨️' }}
				</text>
			</view>
			
			<view class="form-item">
				<text class="icon">🔒</text>
				<input 
					:type="showConfirmPassword ? 'text' : 'password'"
					v-model="form.confirmPassword"
					placeholder="确认登录密码"
					maxlength="20"
				/>
				<text class="eye-icon" @click="showConfirmPassword = !showConfirmPassword">
					{{ showConfirmPassword ? '👁️' : '👁️‍🗨️' }}
				</text>
			</view>
		</view>
		
		<view class="tips">
			<text>密码由6-20位字母、数字或符号组成</text>
		</view>
		
		<view class="agreement">
			<checkbox-group @change="handleAgreementChange">
				<checkbox value="agreed" :checked="isAgreed" color="#4A90E2" />
				<text class="agreement-text">
					我已阅读并同意
					<text class="link" @click="handleNavigate('/pages/common/agreement')">《用户协议》</text>
					和
					<text class="link" @click="handleNavigate('/pages/common/privacy')">《隐私政策》</text>
				</text>
			</checkbox-group>
		</view>
		
		<button 
			class="submit-btn"
			:disabled="!canSubmit"
			:class="{ disabled: !canSubmit }"
			@click="handleRegister"
		>
			注册
		</button>
		
		<view class="login-link">
			已有账号？<text @click="handleNavigate('/pages/login/index')">去登录</text>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, inject } from 'vue'
import request from "@/common/request.js"

// 注入全局配置
const { STORAGE_KEY } = inject('config')

const form = ref({
	phone: '',
	password: '',
	confirmPassword: ''
})

const showPassword = ref(false)
const showConfirmPassword = ref(false)
const isAgreed = ref(false)

// 验证手机号格式
const isValidPhone = computed(() => {
	return /^1[3-9]\d{9}$/.test(form.value.phone)
})

// 验证密码格式
const isValidPassword = computed(() => {
	const passwordRegex = /^(?=.*[a-zA-Z])(?=.*\d).{6,20}$/
	return passwordRegex.test(form.value.password)
})

// 验证表单是否可提交
const canSubmit = computed(() => {
	return isValidPhone.value && 
		isValidPassword.value && 
		form.value.password === form.value.confirmPassword && 
		isAgreed.value
})

// 处理注册
const handleRegister = () => {
	if (!canSubmit.value) return
	
	if (!isValidPassword.value) {
		uni.showToast({
			title: '密码必须包含字母和数字',
			icon: 'none'
		})
		return
	}
	
	if (form.value.password !== form.value.confirmPassword) {
		uni.showToast({
			title: '两次密码不一致',
			icon: 'none'
		})
		return
	}
	
	// 模拟注册过程 18171759943
	uni.showLoading({
		title: '注册中...'
	})
	
	setTimeout(() => {
		uni.hideLoading()
		// uni.showToast({
		// 	title: '注册成功',
		// 	icon: 'success'
		// })
		console.log(form.value);
		request.post("api/user/register/", {
			name: "优贷云用户",
			phone: form.value.phone,
			password: form.value.password
		}, {success: "注册成功了"}).then(res => {
			console.log(res);
			// 使用配置中的key保存用户数据
			uni.setStorageSync(STORAGE_KEY.USER_INFO, JSON.stringify(res.data))
			
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}, 1500)
		})
		
		
		
	}, 2000)
}

// 处理协议勾选
const handleAgreementChange = (e) => {
	isAgreed.value = e.detail.value.length > 0
}

// 页面跳转
const handleNavigate = (url) => {
	uni.navigateTo({ url })
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #fff;
	padding: 40rpx;
}

.form-section {
	margin-bottom: 30rpx;
	
	.form-item {
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #eee;
		padding: 20rpx 0;
		margin-bottom: 30rpx;
		
		.icon {
			font-size: 40rpx;
			margin-right: 20rpx;
		}
		
		input {
			flex: 1;
			font-size: 32rpx;
		}
		
		.eye-icon {
			font-size: 40rpx;
			padding: 0 20rpx;
		}
	}
}

.tips {
	margin-bottom: 30rpx;
	
	text {
		font-size: 24rpx;
		color: #999;
	}
}

.agreement {
	text-align: center;
	margin-bottom: 40rpx;
	
	.agreement-text {
		font-size: 26rpx;
		color: #666;
		margin-left: 10rpx;
		
		.link {
			color: #4A90E2;
		}
	}
}

.submit-btn {
	background-color: #4A90E2;
	color: #fff;
	border-radius: 45rpx;
	height: 90rpx;
	line-height: 90rpx;
	font-size: 32rpx;
	margin-bottom: 30rpx;
	
	&.disabled {
		background-color: #ccc;
	}
}

.login-link {
	text-align: center;
	font-size: 28rpx;
	color: #666;
	
	text {
		color: #4A90E2;
	}
}
</style> 